<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>全选与全不选</title>
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Microsoft YaHei';
        }
        form {
            width: 150px;
            margin: 0 auto;
            padding: 5px;
            border: 1px solid #aaa;
        }
        header{
            border-bottom: 1px solid #aaa;
        }
        header>*{
            line-height: 24px;
        }
        header>a{
            text-decoration: none;
        }

        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            margin: 5px 0;
        }
        ul>li{
            line-height: 24px;
        }
    </style>
</head>

<body>
    <form>
        <header>
            <input type="checkbox"><span>全选</span>
            <a href="javascript:;">反选</a>
        </header>
        <ul>
            <li><input type="checkbox"><span>选项1</span></li>
            <li><input type="checkbox"><span>选项2</span></li>
            <li><input type="checkbox"><span>选项3</span></li>
            <li><input type="checkbox"><span>选项4</span></li>
            <li><input type="checkbox"><span>选项5</span></li>
            <li><input type="checkbox"><span>选项6</span></li>
            <li><input type="checkbox"><span>选项7</span></li>
            <li><input type="checkbox"><span>选项8</span></li>
            <li><input type="checkbox"><span>选项9</span></li>
            <li><input type="checkbox"><span>选项10</span></li>
        </ul>
    </form>
</body>

</html>
<script>
    var checkAll = document.querySelector('header input');
    // console.log(checkAll);
    var span = document.querySelector('header span');
    // console.log(span);
    var invert = document.querySelector('header a');
    // console.log(invert);
    var inputs = document.querySelectorAll('ul input');
    // console.log(inputs);


    // 全选键功能
    checkAll.onclick = function(){
        var checked = checkAll.checked;
        console.log('checked1 = ' +  checked);
        if(checked){
            for(var i = 0; i < inputs.length; i++){
                inputs[i].checked = 'checked';
            }
            span.innerHTML = '全不选';

        }else{
            for(var i = 0; i < inputs.length; i++){
                inputs[i].checked = '';
            }
            span.innerHTML = '全选';
        }
    }

    // 反选键功能
    invert.onclick = function(){
        var checked = checkAll.checked;
        console.log('checked2 = ' +  checked);
        if(!checked){
            
            // 循环判断
            for(var i = 0; i <inputs.length; i++){
                var result = inputs[i].checked;
                console.log('result1 = ' +  result);
                if(!result){
                    inputs[i].checked = 'checked';
                }else{
                    inputs[i].checked = '';
                }
            }

        }else{
            for(var i = 0; i < inputs.length; i++){
                inputs[i].checked = '';
            }
            checkAll.checked = '';
            span.innerHTML = '全选';
        }

        var m = 0;
        for(var i = 0; i < inputs.length; i++){
            if(inputs[i].checked){
                m ++;
            }
        }
        if(m == 10){
            checkAll.checked = 'checked';
            span.innerHTML = '全不选';
        }else{
            checkAll.checked = '';
            span.innerHTML = '全选';
        }
    }

    // 试试判断功能
    // 遍历
    for(var i = 0; i < inputs.length; i++){
        inputs[i].onclick = function(){
            var n = 0;
            for(var i = 0; i < inputs.length; i++){
                if(inputs[i].checked){
                    n ++;
                }
            }
        if(n == 10){
            checkAll.checked = 'checked';
            span.innerHTML = '全不选';
        }else{
            checkAll.checked = '';
            span.innerHTML = '全选';
        }
        }
    }
</script>